<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="订单用户">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.user_keys"
                        placeholder="请输入用户昵称/姓名/手机号"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="订单单号">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.order_no"
                        placeholder="请输入订单单号"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>

                <el-form-item label="下单时间">
                    <daterange-picker
                            class="w-[385px]"
                            value-format="YYYY-MM-DD"
                            v-model:startTime="queryParams.create_at_start_time"
                            v-model:endTime="queryParams.create_at_end_time"
                    />
                </el-form-item>
                <el-form-item label="支付时间">
                    <daterange-picker
                            class="w-[385px]"
                            value-format="YYYY-MM-DD"
                            v-model:startTime="queryParams.payment_datetime_start_time"
                            v-model:endTime="queryParams.payment_datetime_end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPageNew">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-tabs class="demo-tabs" v-model="type" @tab-click="handleTabclick">

                <el-table size="large" v-loading="pager.loading" @selection-change="handleSelectionChange" :data="pager.lists" style="width: 100%">
<!--					<el-table-column type="selection" width="60" />-->
                    <el-table-column label="用户信息" prop="nickname" min-width="100">
                        <template #default="{ row }">
                            <div class="flex flex-row items-center gap-2">
                                <div>
                                    <el-avatar :src="row?.user?.headimg" style="height: 60px; min-width: 60px"/>
                                </div>
                                <div>
                                    <div>
                                        <span>用户ID：</span>
                                        <span style="color: #2494f2">{{row.user.id}}</span>
                                    </div>
                                    <div>
                                        <span>用户昵称：</span>
                                        <span style="color: #2494f2">{{row.user.nickname}}</span>
                                    </div>
                                    <div>
                                        <span>用户手机：</span>
                                        <span style="color: #2494f2">{{row.user.phone}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" prop="nickname" min-width="100">
                        <template #default="{ row }">
                            <el-tag class="ml-2">{{row.status_dao_name}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单信息" prop="nickname" min-width="100">
                        <template #default="{ row }">
                            <div class="flex flex-col gap-2">
                                <div>
                                    <span>订单单号：</span>
                                    <span style="color: #2494f2">{{row.order_no}}</span>
                                </div>
                                <div>
                                    <span>订单总计：</span>
                                    <span style="color: #2494f2">{{row.amount_total}} 元 已支付 {{row.payment_amount}} 元</span>
                                </div>
                                <div>
                                    <span>下单时间：</span>
                                    <span style="color: #2494f2">{{row.create_at}}</span>
                                </div>
                                <div>
                                    <span>支付时间：</span>
                                    <span style="color: #2494f2">{{row.payment_datetime}}</span>
                                    <span style="color: #2494f2">（{{row.payment_name}}）</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品信息" prop="nickname" min-width="200">
                        <template #default="{ row }">
                            <div class="flex flex-row items-center gap-2">
                                <span style="color: #2494f2">{{row?.items[0]?.stock_sales}}件</span>
                                <span>x</span>
                                <span style="color: #2494f2">{{row?.items[0]?.price_selling}}元</span>
                                <div>
                                    <el-avatar :src="row?.items[0]?.goods_cover" style="height: 60px; min-width: 60px"/>
                                </div>
                                <span style="color: #2494f2">{{row?.items[0]?.goods_name}}</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-tabs>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import cache from '@/utils/cache'
import router, { getRoutePath } from '@/router'
const route = useRoute()
import feedback from "@/utils/feedback";
import { getExtendOrder } from '@/api/teamhead'

console.log(route.query)
const queryParams = reactive({
    uuid: route.query.id,
    user_keys: '',
    order_no: '',
    create_at: '',  // 下单时间  格式：2024-09-02 - 2024-10-02-搜索
    create_at_start_time: '',  // 下单时间  格式：2024-09-02 - 2024-10-02-搜索
    create_at_end_time: '',  // 下单时间  格式：2024-09-02 - 2024-10-02-搜索
    payment_datetime: '',
    payment_datetime_start_time: '',
    payment_datetime_end_time: '',
    export: false
});

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getExtendOrder,
    params: queryParams
});

getLists();

const resetPageNew = () => {
    queryParams.create_at = queryParams.create_at_end_time ? `${queryParams.create_at_start_time} - ${queryParams.create_at_end_time}` : null;
    queryParams.payment_datetime = queryParams.payment_datetime_end_time ? `${queryParams.payment_datetime_start_time} - ${queryParams.payment_datetime_end_time}` : null;
    getLists()
}


</script>
